<template>
  <view class="container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="back-btn">
        <image class="fanhui-image" :src="'https://www.ruanzi.net/jy/wxuser/103/images/pages/老人左.png'" mode="aspectFill"></image>
      </view>
      <image class="nav-title" :src="'https://www.ruanzi.net/jy/wxuser/103/images/pages/首页.png'" mode="aspectFill"></image>
    </view>

    <!-- 头像区域 -->
    <view class="avatar-container">
      <view class="avatar-border">
        <image class="avatar-image" :src="'https://www.ruanzi.net/jy/wxuser/103/images/pages/头像.png'" mode="aspectFill"></image>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-container">
      <!-- 个人资料选项 -->
      <view class="option-item">
        <view class="option-left">
          <view class="option-icon">
            <image class="icon-person" :src="'https://www.ruanzi.net/jy/wxuser/103/images/pages/个人资料.png'" mode="aspectFill"></image>
          </view>
          <text class="option-text">个人资料</text>
        </view>
        <view class="option-right">
          <image class="arrow-icon" :src="'https://www.ruanzi.net/jy/wxuser/103/images/pages/右.png'" mode="aspectFill"></image>
        </view>
        <view class="custom-line"></view>
      </view>

      <!-- 地址管理选项 -->
      <view class="option-item">
        <view class="option-left">
          <view class="option-icon">
            <image class="icon-location" :src="'https://www.ruanzi.net/jy/wxuser/103/images/pages/地址管理.png'" mode="aspectFill"></image>
          </view>
          <text class="option-text">地址管理</text>
        </view>
        <view class="option-right">
          <image class="arrow-icon" :src="'https://www.ruanzi.net/jy/wxuser/103/images/pages/右.png'" mode="aspectFill"></image>
        </view>
        <view class="custom-line"></view>
      </view>

      <!-- 亲人绑定选项 -->
      <view class="option-item">
        <view class="option-left">
          <view class="option-icon">
            <image class="icon-people" :src="'https://www.ruanzi.net/jy/wxuser/103/images/pages/亲人绑定.png'" mode="aspectFill"></image>
          </view>
          <text class="option-text">亲人绑定</text>
        </view>
        <view class="option-right">
          <image class="arrow-icon" :src="'https://www.ruanzi.net/jy/wxuser/103/images/pages/右.png'" mode="aspectFill"></image>
        </view>
        <view class="custom-line"></view>
      </view>

      <!-- 账户安全选项 -->
      <view class="option-item">
        <view class="option-left">
          <view class="option-icon">
            <image class="icon-shield" :src="'https://www.ruanzi.net/jy/wxuser/103/images/pages/账户安全.png'" mode="aspectFill"></image>
          </view>
          <text class="option-text">账户安全</text>
        </view>
        <view class="option-right">
          <image class="arrow-icon" :src="'https://www.ruanzi.net/jy/wxuser/103/images/pages/右.png'" mode="aspectFill"></image>
        </view>
        <view class="custom-line"></view>
      </view>
    </view>
  </view>
</template>

<style scoped>
  /* 全局样式 */
  .container {
    width: 100%;
    height: 100vh;
    background-color: #fece90;
    overflow: hidden;
  }

  /* 导航栏样式 */
  .nav-bar {
    width: 100%;
    height: 88rpx;
    background-color: #fece90;
    display: flex;
    align-items: center;
    padding: 0 300rpx;
    margin-top: 70rpx;
  }

  .fanhui-image {
    width: 60rpx;
    height: 60rpx;
    position: relative;
    right: 290rpx;
  }

  .back-btn {
    margin-right: 10rpx;
  }

  .back-icon {
    font-size: 40rpx;
  }

  .nav-title {
    width: 80rpx;
    height: 50rpx;
    position: relative;
    right: 300rpx;
  }

  /* 头像区域样式 */
  .avatar-container {
    width: 100%;
    height: 440rpx;
    background-color: #fece90;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
  }

  .avatar-border {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    position: absolute;
    top: 160rpx;
    left: 50rpx;
    overflow: hidden;
  }

  .avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* 使图片呈圆形 */
  }

  /* 内容区域样式 */
  .content-container {
    width: 95%;
    height: 1110rpx;
    background-color: #fff;
    border-radius: 70rpx 70rpx 0 0;
    margin-top: -200rpx;
    padding: 60rpx 0 40rpx;
    box-shadow: 0 -20rpx 30rpx rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .option-item {
    width: 90%;
    height: 100rpx;
    margin: 0 auto 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    position: relative;
  }

  .option-left {
    display: flex;
    align-items: center;
    margin-left: 30rpx;
  }

  .option-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .icon-person {
    width: 100rpx;
    height: 50rpx;
  }

  .icon-location {
    width: 100rpx;
    height: 50rpx;
  }

  .icon-people {
    width: 100rpx;
    height: 50rpx;
  }

  .icon-shield {
    width: 100rpx;
    height: 50rpx;
  }

  .option-text {
    font-size: 32rpx;
    color: #333;
    font-weight: bolder;

  }

  .option-right {
    width: 40rpx;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30rpx;
  }

  .arrow-icon {
    width: 50rpx;
    height: 50rpx;
  }

  /* 自定义线样式 */
  .custom-line {
    position: absolute;
    bottom: 10rpx;
    left: 45rpx;
    width: 90%;
    height: 1rpx;
    background-color: #f0f0f0;
  }
</style>